﻿import QtQuick 2.0

Rectangle {
    width: 480;
    height: 300;

    //背景色渐变
    gradient: Gradient {
        GradientStop { position: 0.0; color: "#dbddde"; }
        GradientStop { position: 1.0; color: "#5fc9f8"; }
    }

    //list模型默认9项
    ListModel {
        id: theModel

        ListElement { number: 0; }
        ListElement { number: 1; }
        ListElement { number: 2; }
        ListElement { number: 3; }
        ListElement { number: 4; }
        ListElement { number: 5; }
        ListElement { number: 6; }
        ListElement { number: 7; }
        ListElement { number: 8; }
        ListElement { number: 9; }
    }

    //Add Item按钮
    Rectangle {
        anchors.left: parent.left;
        anchors.right: parent.right;
        anchors.bottom: parent.bottom;
        anchors.margins: 20;

        height: 40;

        color: "#53d769";
        border.color: Qt.lighter(color, 1.1);

        Text {
            anchors.centerIn: parent;

            text: "Add item!";
        }

        //点击时新增项  实现model的动态新增
        MouseArea {
            anchors.fill: parent;

            onClicked: {
                theModel.append({"number": ++parent.count});
            }
        }

        property int count: 9;//
    }

    GridView {
        anchors.fill: parent;
        anchors.margins: 20;
        anchors.bottomMargin: 80;

        clip: true;

        model: theModel;//绑定数据源

        cellWidth: 45;//设置项大小
        cellHeight: 45;

        delegate: numberDelegate;//设置绘制代理
    }

    //自定义绘制代理
    Component {
        id: numberDelegate;

        Rectangle {
            id: wrapper;

            width: 40;
            height: 40;

            //首先是一个渐变的矩形框
            gradient: Gradient {
                GradientStop { position: 0.0; color: "#f8306a"; }
                GradientStop { position: 1.0; color: "#fb5b40"; }
            }

            //文本值是number的数值
            Text {
                anchors.centerIn: parent;

                font.pixelSize: 10;

                text: number;
            }

            //鼠标点击代理时，移除点击项
            MouseArea {
                anchors.fill: parent;

                onClicked: {
                    if (!wrapper.GridView.delayRemove)//是否延迟移除
                    {
                        theModel.remove(index);
                    }
                }
            }

            //GridView移除项  顺序动画
            GridView.onRemove: SequentialAnimation {
                //属性变化
                PropertyAction {
                    target: wrapper;
                    property: "GridView.delayRemove";
                    value: true;
                }
                //数字动画
                NumberAnimation {
                    target: wrapper;//目标对象
                    property: "scale";//执行动画的属性
                    to: 0;//结束值
                    duration: 250;//动画持续时长
                    easing.type: Easing.InOutQuad;//动画执行曲线
                }
                PropertyAction {
                    target: wrapper;
                    property: "GridView.delayRemove";
                    value: false;
                }
            }

            //GridView新增项  顺序动画
            GridView.onAdd: SequentialAnimation {
                NumberAnimation {
                    target: wrapper;
                    property: "scale";
                    from: 0;//开始值
                    to: 1;
                    duration: 250;
                    easing.type: Easing.InOutQuad;
                }
            }
        }
    }
}
